<template>
  <div class="">
    <div>
      <el-dialog v-model="personLabelDialog" width="600px" :append-to-body="true" :close-on-click-modal="false"
        @close="cancelPersonLabelDialog">
        <template #header>
          <svg-icon icon-class="tags" style="margin-right:5px;color: #73d897;"></svg-icon>
          <span>选择团队标签</span>
        </template>
        <el-form :model="fromPersonLabel">
          <el-form-item label="文件标签" label-width="70px">
            <!-- <el-input v-model="fromPersonLabel.labelName" autocomplete="off"></el-input> -->
            <el-tag :key="tag.labelId" v-for="(tag, indexs) in dynamicTags" closable size="medium"
              :disable-transitions="false" @close="handleClose(tag, indexs)">
              {{ tag.labelName }}
            </el-tag>
            <el-tag :key="tag.id" v-for="(tag, index) in dynamicTagsNew" closable size="medium"
              :disable-transitions="false" @close="handleCloseNew(index)">
              {{ tag.labelName }}
            </el-tag>
          </el-form-item>
          <el-form-item label="团队标签" label-width="70px">
            <div class="label_database">
              <el-tag class="my_tags" v-for="mtag in myTagsList" :key="mtag.id" @click="selectTagsItem(mtag)">{{
                mtag.labelName }}</el-tag>
            </div>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelPersonLabelDialog">取 消</el-button>
          <el-button type="primary" @click="SureDialogPersonLabelClick">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { apiFilesLabelRecordCreateList, apiFilesLabelRecordCreate, apiFilesLabelRecordQuerySelect, apiFilesUserLabelGetData } from "@/api/teamKnowdge/teamDocApi"
const personLabelDialog = ref(false)
const fromPersonLabel = reactive({
  labelName: ""
})
const myTagsList = ref([])
const inputValue = ref('')
const dynamicTags = ref([])
const dynamicTagsNew = ref([])
const removeLabelIds = ref([])
const parentObj = ref({
  id: "",
  libraryType: "",
})
const parentObjs = ref([])
const route = useRoute()
const emit = defineEmits(['refreshData'])


const cancelPersonLabelDialog = () => {
  personLabelDialog.value = false
  dynamicTags.value = []
  myTagsList.value = []
  dynamicTagsNew.value = []
  removeLabelIds.value = []
  fromPersonLabel.labelName = ""
  parentObjs.value = []
}
const handleClose = (tag, indexs) => {
  removeLabelIds.value.push(tag.labelId)
  dynamicTags.value.splice(indexs, 1)
}

const handleCloseNew = (tag) => {
  dynamicTagsNew.value.splice(tag, 1)
}

const selectTagsItem = (val) => {
  dynamicTagsNew.value.forEach((item) => {
    item.labelId = item.id
  })
  let concatArray = dynamicTagsNew.value.concat(dynamicTags.value)
  if (concatArray.findIndex((item) => item.labelId == val.id) == -1) {
    dynamicTagsNew.value.push(val)
  } else {
    ElMessage.warning('该标签已存在')
  }
}

const SureDialogPersonLabelClick = () => {
  let labelId = dynamicTagsNew.value.map((item) => {
    return item.id
  })
  if (parentObjs.value.length > 0) {
    let fileId = parentObjs.value.map((item) => {
      return item.id
    })
    apiFilesLabelRecordCreateList({
      fileIds: fileId,
      fileType: parentObjs[0].libraryType,
      labelId: labelId,
      labelType: 'team',
      teamId: route.query.teamId ? route.query.teamId : null
    })
      .then((res) => {
        emit('refreshData')
        ElMessage.success('添加成功')
        cancelPersonLabelDialog()
      })
    return
  }
  apiFilesLabelRecordCreate({
    fileId: parentObj.value.id,
    fileType: parentObj.value.libraryType,
    labelId: labelId,
    removeLabelId: removeLabelIds.value,
    labelType: 'team',
    teamId: route.query.teamId ? route.query.teamId : null
  })

    .then((res) => {
      emit('refreshData')
      ElMessage.success('添加成功')
      cancelPersonLabelDialog()
    })
}

const apiFilesLabelRecordQuerySelectFun = async (row) => {
  const res = await apiFilesLabelRecordQuerySelect({
    fileId: row.id,
    fileType: row.libraryType,
    labelType: 'team',
    teamId: route.query.teamId
  })
  if (res.code == 200) {
    dynamicTags.value = res.data
  }
}
const apiFilesUserLabelQuery = async () => {
  let params = {
    page: 0,
    size: 100,
    teamId: route.query.teamId
  }
  const res = await apiFilesUserLabelGetData(params)
  if (res.code == 200) {
    myTagsList.value = res.data.rows
  }
}

defineExpose({
  apiFilesUserLabelQuery,
  apiFilesLabelRecordQuerySelectFun,
  parentObj,
  personLabelDialog
})






</script>

<style lang="scss" scoped>
#testTree {
  :deep(.el-checkbox .el-checkbox__inner) {
    display: none;
  }

  :deep(div[role="group"]) {
    .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
  }
}

.my_tags {
  cursor: pointer;
}

.my_tags:hover {
  background-color: #409eff;
  color: #fff;
  border: 1px solid #409eff;
}

.label_database {
  width: 100%;
  min-height: 80px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 6px;
  // display: flex;
  // flex-wrap: wrap;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 190px;
  margin-left: 10px;
  vertical-align: bottom;
}

.select_btn {
  margin-bottom: 10px;
}
</style>